<template>
  <span>
    <el-input
      v-model="selectVal"
      :placeholder="placeholder"
      @focus="supplier.visible = true"
      readonly>
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="supplier.visible = true"
      ></el-button>
    </el-input>
    <SelectSupplierDialog
      :title="supplier.title"
      :invoice="supplier.invoice"
      :supplierVisible.sync="supplier.visible"
      @handle-select="handleSelect" />
  </span>
</template>
<script>
import SelectSupplierDialog from '@/pages/supplier/components/SelectSupplierDialog'

export default {
  name: 'SupplierSelect', // 供应商选择
  components: { SelectSupplierDialog },
  props: {
    // 弹框标题
    title: String,
    // 是否开票供应商
    invoice: { type: Boolean, default: false },
    placeholder: String
  },
  data () {
    const { title, invoice } = this
    return {
      selectVal: '',
      // 供应商
      supplier: {
        title: title || (invoice ? '查询开票供应商' : '查询供应商'),
        invoice,
        visible: false,
      },
    };
  },
  methods: {
    handleSelect (row) {
      const { invoice } = this
      this.$emit('input', invoice ? row.invoiceSupplierId : row.supplierId);
      this.$emit('change', invoice ? row.invoiceSupplierId : row.supplierId);
      this.selectVal = invoice ? row.invoiceSupplierName : row.supplierName
    },
    resetSelectVal () {
      this.selectVal = ''
    }
  }
};
</script>
